<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
      <el-form-item label="所属公司" prop="companyId">
        <el-select v-model="dataForm.companyId" clearable placeholder="请选择" :disabled="dataForm.id !== null">
          <el-option v-for="item in companys" :key="item.id" :label="item.companyName" :value="item.id" :disabled="item.status !== 1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺名称" prop="shopName"><el-input v-model="dataForm.shopName" placeholder="店铺名称" maxlength="40"></el-input></el-form-item>
      <el-form-item label="店铺地址"><el-input v-model="dataForm.shopAddress" placeholder="地址信息" maxlength="80"></el-input></el-form-item>
      <el-form-item label="管理人"><el-input v-model="dataForm.shopManager" placeholder="店铺管理人" maxlength="40"></el-input></el-form-item>
      <el-form-item label="店铺联系电话" prop="shopTel">
        <el-input v-model="dataForm.shopTel" placeholder="电话" maxlength="80"></el-input>
      </el-form-item>
      <el-form-item label="微信" prop="shopWx">
        <el-input v-model="dataForm.shopWx" placeholder="微信" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="shopEmail">
        <el-input v-model="dataForm.shopEmail" placeholder="邮箱" maxlength="50"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :disabled="disabled" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    companys: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      visible: false,
      disabled: false,
      dataForm: {
        id: null,
        companyId: null,
        shopName: '',
        shopAddress: '',
        shopManager: '',
        shopTel: '',
        shopWx: '',
        shopEmail: '',
        status: null
      },
      dataRule: {
        companyId: [
          {
            required: true,
            message: '请选择所属公司',
            trigger: 'blur'
          }
        ],
        shopName: [
          {
            required: true,
            message: '店铺名称不能为空',
            trigger: 'blur'
          }
        ],
        shopTel: [
          {
            required: true,
            message: '店铺联系电话不能为空',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  methods: {
    init(id) {
      this.dataForm = {
        id: id || null,
        companyId: null,
        shopName: '',
        shopAddress: '',
        shopManager: '',
        shopTel: '',
        shopWx: '',
        shopEmail: '',
        status: null
      };

      this.$nextTick(() => {
        if (this.dataForm.id) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.$http({
            url: this.$http.adornUrl(`/merchant/shop/detail/${this.dataForm.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            loading.close()
            if (data && data.code === 0) {
              this.dataForm.companyId = data.item.companyId;
              this.dataForm.shopName = data.item.shopName;
              this.dataForm.shopAddress = data.item.shopAddress;
              this.dataForm.shopManager = data.item.shopManager;
              this.dataForm.shopTel = data.item.shopTel;
              this.dataForm.shopWx = data.item.shopWx;
              this.dataForm.shopEmail = data.item.shopEmail;
            }
            this.visible = true;
          }).catch(() => {
            loading.close()
          });
        } else {
          this.visible = true;
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.disabled = true;
          this.$http({
            url: this.$http.adornUrl(`/merchant/shop/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              companyId: this.dataForm.companyId,
              shopName: this.dataForm.shopName,
              shopAddress: this.dataForm.shopAddress,
              shopManager: this.dataForm.shopManager,
              shopTel: this.dataForm.shopTel,
              shopWx: this.dataForm.shopWx,
              shopEmail: this.dataForm.shopEmail
            })
          }).then(({ data }) => {
            this.disabled = false;
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit('refreshDataList');
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
